<template>
  <div>
    <van-goods-action>
      <van-goods-action-icon
        :icon="isCollected ? 'star' : 'star-o'"
        :text="isCollected ? '已收藏' : '未收藏'"
        :color="isCollected ? '#ff5000' : '#000000'"
        @click="isCollected = !isCollected"
      />
      <van-goods-action-icon icon="chat-o" text="客服" color="#000000" />
      <van-goods-action-icon icon="cart-o" text="购物车" color="#000000" :badge="goodsCount" />
      <van-goods-action-button type="danger" text="立即购买" @click="buyClick" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCartClick" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: 'AppGoodsAction',
  components: {},
  props: [
    'goodsCount' // *购物车的数量，父组件 ProductDetail 传的值
  ],
  data () {
    return {
      isCollected: false // *收藏按钮
    }
  },
  computed: {},
  created () {},
  mounted () {},
  watch: {},
  methods: {
    buyClick () {
      this.$toast('功能未开放')
    },
    addCartClick () {
      // ? 点击加入购物车事件，子组件传父组件，需要 $emit()
      this.$emit('addToCart')
    }
  }
}
</script>

<style scoped lang='less'>
  .van-goods-action{
    // ? 为了让选择商品也出现底部功能栏，设置的层级不能太低
    z-index: 99999;
    height: 1.33rem;
    box-shadow: 1px 0 1px 1px #efefef;
    background-color: lightgray;
    *{
      background-color: lightgray;
    }
  }
</style>
